
import { Card, Tabs, Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import API from "../../api/auth"
import userApi from "../../api/userApi"
import React from 'react';
import "./login.scss"


/* 登录功能 */
export default function Login() {

  const [loginFrom] = Form.useForm()

  const navigate = useNavigate()

  const login = async (values) => {
    const token = await API.login(values);
    if (token) {
      localStorage.setItem("token", token);
      navigate('/home')
    }
    // 拿到当前账号的权限
    const userInfo = await userApi.getUserInfo(values);
    // 保存角色渲染对应的菜单
    localStorage.setItem("roles", JSON.stringify(userInfo.role));
    // 跳转到对应页面
    navigate(
      userInfo.role.includes("admin") ? "/showdata/dataChart" : "/custom/customList"
    );
  }

  return (
    <div className="login">

      <Card
        bordered={false}
        style={{
          width: 400,
          textAlign: "center"
        }}
      >
        <h2>请登录</h2>

        <Form form={loginFrom} onFinish={login}>
          <Form.Item
            label="用户名"
            name="userName"
            rules={[
              {
                required: true,
                message: "请输入用户名！",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="passWord"
            rules={[
              {
                required: true,
                message: "请输入密码！",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 5,
              span: 16,
            }}
          >

            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>

    </div>
  )
}